<template>
    <div class="dashboard-wrapper">
      <!-- 内部 Tab 栏 -->
      <el-tabs v-model="activeTab" @tab-change="handleTabChange">
        <el-tab-pane label="总览"   name="overview"  />
        <el-tab-pane label="工作台" name="workbench" />
        <el-tab-pane label="分析页" name="analysis"  />
      </el-tabs>
  
      <!-- 对应内容 -->
      <Overview  v-if="activeTab === 'overview'"  />
      <WorkBench v-if="activeTab === 'workbench'" />
      <Analysis  v-if="activeTab === 'analysis'"  />
    </div>
  </template>
  
  <script setup>
  import { ref, watch } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  import Overview  from '@/components/tabs/Overview.vue'
  import WorkBench from '@/components/tabs/WorkBench.vue'
  import Analysis  from '@/components/tabs/Analysis.vue'
  
  const route   = useRoute()
  const router  = useRouter()
  const activeTab = ref(route.params.tab || 'overview')
  
  watch(() => route.params.tab, val => {
    activeTab.value = val || 'overview'
  })
  
  function handleTabChange(tab) {
    router.replace(`/dashboard/${tab}`)
  }
  </script>